﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>个人信息</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <style type="text/css">
        .avatar
        {
            float: left;
            margin-right: 10px;
            padding: 10px;
            text-align: center;
            width: 110px;
            background: none repeat scroll 0 0 #E5E5E5;
        }
        #loginInfoform, #myContactForm
        {
            margin-left: 140px;
        }
       
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script src="../../Scripts/ajaxupload.js"></script>
    <script src="../../Scripts/swfupload/swfupload.js"></script>
    <script src="../../Scripts/swfupload/handlers.js"></script>
    <script type="text/javascript">
        var swfu;
        function initImageUploadControl() {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "/staff/DoImageUpload?userId=" + EzAccessor.getCurrentUser().Id,

                // File Upload Settings
                file_size_limit: "10 MB",
                file_types: "*.jpg",
                file_types_description: "头像照片",
                file_upload_limit: "0",    // Zero means unlimited

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                upload_success_handler: function () { $('#personalGravatar').attr('src', '/core/headicon/' + (new Date).toEpoch()); },
                upload_complete_handler: uploadComplete,

                // Button settings
                button_image_url: "../../content/images/swf-upload-XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 80,
                button_height: 22,
                button_text: '<span class="button">更换头像</span></span>',
                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 1,
                button_text_left_padding: 5,

                // Flash Settings
                flash_url: "../../scripts/swfupload/swfupload.swf", // Relative to this file

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },

                // Debug Settings
                debug: false
            });
        }
    </script>
    <script type="text/javascript">


    //************* URL常量
    var URL_UPDATE_STAFFINFO = "/Staff/DoUpdateContactInfo";
    //************* 全局变量
    var g_Var = {
        "dataStorage": null
    };

    //************* 常量定义
    var StaticResource = {
};
//************* Accessor访问器


var EzAccessor = {};

function CreateAccessor() {
   EzAccessor = CreateRealEzAccessor();
}

function CreateRealEzAccessor() {
    //实现服务器交互方法
    var realEzAccessor = {
        "getCurrentUser": function () {
                        return <%= ViewData["CurrentUser"] %>;
        },
        "getStaffInfos": function () {
                        return <%= ViewData["StaffInfos"] %>;
        }
    };

    return realEzAccessor;
}


function bindSimpleInfo(currentUser) {
    $('#lblUserName').html(currentUser.Name);
    $('#lblDeptName').html(currentUser.Dept.DeptName);
    $('#lblPosition').html(currentUser.Position.Description);
};


function bindLoginInfo(currentUser){
    $('#txtUserName').val(currentUser.UserName);
}

function bindStaffInfos(staffInfos) {
    $('#liQqNumber .active-input').val(staffInfos.QqNumber);
    $('#liMobileNo .active-input').val(staffInfos.MobileNo);
    $('#liEmail .active-input').val(staffInfos.MainEmail);
};


//上传头像
function uploadHeadIcon(){
    var button = $('#btnUploadHeadIcon'), interval;
	var isUploading =  $('#txtUploading');
    	
	new AjaxUpload(button, {
		action: '/staff/doImageUpload', 
		name: 'headIcon',
		onSubmit : function(file, ext){
            if (ext && /^(jpg|jpeg|png)$/.test(ext)){
                /* Setting data */
                button.hide();
                isUploading.show();
			    $(document).ajaxBusy('begin');
			    this.disable();
			    interval = window.setInterval(function(){
			        button.hide();
                    isUploading.show();	
			    });
            } else {
                var statusInfo = { 'Status': 'Error', 'Info': '头像必须是jpg或png格式！', 'Data': null };
                $.displayStatusInfo(statusInfo);
                return false;
            }
        },
		onComplete: function(file, response){
            button.show();
            isUploading.hide();	
			
            $('#personalGravatar').attr('src', '/core/headicon/' + (new Date).toEpoch())
            
            $(document).ajaxBusy('end'); 
            var statusInfo = JSON.parse($(response).html());
            $.displayStatusInfo(statusInfo);
            window.clearInterval(interval);
			
            this.enable();
		}
	});
}

function InitValidation()
{
    $.validator.addMethod('checkIsPasswordSame',function(value, element) { 
        return $('#txtNewPwd').val() == $('#txtPwdConfirm').val();
    },'两次输入密码不一致');

    $("#myContactForm").validate({
        onkeyup:false,
        rules: {
                txtEmail:{email:true},
                txtMobile:{digits:true,minlength:11},
                txtQq:{digits:true}
            },
        messages:
            {
                txtEmail:"不是有效的邮箱地址",
                txtMobile:{digits:"请输入数字",minlength:"不能少于11位"},
                txtQq:"请输入数字"
            }
    });

    $("#loginInfoform").validate({
        onkeyup:false,
        rules: {
                userName: {
				    required: true
				},
                newPassword: {
                    required: true,
                    minlength: 6
                },
                confirmedPassword:{
                    checkIsPasswordSame: true
                }
            },
        messages:
            {
                userName: "用户名不能为空",
                newPassword: { required: "密码不能为空", minlength: "密码不能少于6位" },
                confirmedPassword: "两次输入密码不一致"
            }
    });

}



function initPage() {
    $(document).ajaxBusy();
    $('#tip_remind').eztips();
    
    CreateAccessor();
    
    bindSimpleInfo(EzAccessor.getCurrentUser());
    bindLoginInfo(EzAccessor.getCurrentUser());
    bindStaffInfos(EzAccessor.getStaffInfos());
   
    $('#extraInfo').formDialog({
        onDataReady: function (event, isOnOK) {
            if (isOnOK == true) {
                $('#divSubmit').show();
                $('#extraInfo').css({'border-color': "red"});
            }
            else {
                $('#divSubmit').hide();
                $('#extraInfo').css({'border-color': "transparent"});
            }
        }
    });
    
}



function initPageEvent() {

    $('#btnCancel').click(function () {
        $('#extraInfo').formDialog('resetData');        
    });


    $('#btnSubmitPwd').click( function (){
        var validSuccess =  $("#loginInfoform").valid();
        if(validSuccess){
            $(document).ajaxBusy('begin');
            $('#loginInfoform').ajaxSubmit({
                data: {
                    userId: EzAccessor.getCurrentUser().Id
                },
                success: function (statusInfo) {
                    $.displayStatusInfo(statusInfo);
                    $(document).ajaxBusy('end');
                }
            });
        }
    });


    $('#btnSubmitContactInfo').click( function (){
        $(document).ajaxBusy('begin');
        $('#myContactForm').ajaxSubmit({
            data: {
                userId: EzAccessor.getCurrentUser().Id
            },
            success: function (statusInfo) {
                $.displayStatusInfo(statusInfo);
                $(document).ajaxBusy('end');
            }
        });
    });

}
$(function () {
    initPage();
    InitValidation();
    initPageEvent();
    initImageUploadControl();
});
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <div id="links">
            <a href="/Staff/contactBook" class="head">公司通讯录</a>
        </div>
        <img src="../../Content/icons/myContact.png" style="width: 48px; height: 48px;" alt="myContact" />
        <span class="title">个人信息</span>
    </div>
    <div id="page-body">
        <div class="avatar">
            <img id="personalGravatar" height="100" width="100" src="/core/headicon" alt="headIcon" />
            <div style="margin: 5px;">
                <%--<a id="btnUploadHeadIcon">修改我的头像</a>
                <p id="txtUploading" style="color: #2E6600; display: none;">
                    正在上传中..</p>--%>
                <div id="swfu_container" style="margin: 0px 10px;">
                    <div>
                        <span id="spanButtonPlaceholder"></span>
                    </div>
                    <div id="divFileProgressContainer" style="height: 30px;">
                    </div>
                    <div id="thumbnails">
                    </div>
                </div>
            </div>
        </div>
        <div class="content-section">
            <p class="entry-explanation">
                基本信息</p>
            <span>基本信息暂时是不可以修改的哦！</span>
            <div style="padding: 5px; margin: 5px; border: 1px solid #A9A9A9; min-height: 80px;">
                <ul class="fieldslist">
                    <li>
                        <div class="l">
                            <label>
                                姓名：
                            </label>
                        </div>
                        <div class="r">
                            <span id="lblUserName"></span>
                        </div>
                    </li>
                    <li>
                        <div class="l">
                            <label>
                                部门：
                            </label>
                        </div>
                        <div class="r">
                            <span id="lblDeptName"></span>
                        </div>
                    </li>
                    <li>
                        <div class="l">
                            <label>
                                职位：
                            </label>
                        </div>
                        <div class="r">
                            <span id="lblPosition"></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <form id="loginInfoform" name="loginInfoform" action="DoUpdatePwd" method="post">
        <div class="content-section">
            <p class="entry-explanation">
                登录信息</p>
            <span>您可以修改您的登录密码</span>
            <div class="formBox">
                <ul class="fieldslist">
                    <li>
                        <div class="l">
                            <label>
                                用户名：
                            </label>
                        </div>
                        <div class="r">
                            <input id="txtUserName" name="userName" readonly="readonly" class="text" />
                        </div>
                    </li>
                    <li>
                        <div class="l">
                            <label>
                                原密码：
                            </label>
                        </div>
                        <div class="r">
                            <input id="txtOldPwd" name="oldPassword" type="password" class="text" />
                        </div>
                    </li>
                    <li>
                        <div class="l">
                            <label>
                                新的密码：
                            </label>
                        </div>
                        <div class="r">
                            <input id="txtNewPwd" name="newPassword" type="password" class="text" />
                        </div>
                    </li>
                    <li>
                        <div class="l">
                            <label>
                                确认密码：
                            </label>
                        </div>
                        <div class="r">
                            <input id="txtPwdConfirm" name="confirmedPassword" type="password" class="text" />
                        </div>
                    </li>
                </ul>
                <div id="btnSubmitPwd">
                    修改密码</div>
                <script>
                    $(function () {
                        $("#btnSubmitPwd").button({
                            icons: {
                                primary: "ui-icon-circle-check"
                            },
                            text: true
                        });
                    });
                </script>
            </div>
        </div>
        </form>
        <form id="myContactForm" name="myContactForm" action="doUpdateContactInfo" method="post">
        <div class="content-section">
            <p class="entry-explanation">
                联系方式</p>
            <span>如果您更换了联系方式，请及时更新。</span>
            <div id="extraInfo" class="formBox">
                <ul class="fieldslist">
                    <li class="active-container">
                        <div class="l">
                            <label>
                                手机：
                            </label>
                        </div>
                        <div class="r">
                            <div id="liMobileNo">
                                <input class="active-input number" name="mobileNo" />
                            </div>
                        </div>
                    </li>
                    <li class="active-container">
                        <div class="l">
                            <label>
                                E-mail：
                            </label>
                        </div>
                        <div class="r">
                            <div id="liEmail">
                                <input class="active-input email" name="mainEmail" />
                            </div>
                        </div>
                    </li>
                    <li class="active-container">
                        <div class="l">
                            <label>
                                QQ：
                            </label>
                        </div>
                        <div class="r">
                            <div id="liQqNumber">
                                <input class="active-input number" name="qqNumber" />
                            </div>
                        </div>
                    </li>
                </ul>
                <div id="divSubmit" style="display: none; margin-top: 10px; margin-left: 5px;">
                    <div id="btnSubmitContactInfo">
                        修改联系方式</div>
                    <script>
                        $(function () {
                            $("#btnSubmitContactInfo").button({
                                icons: {
                                    primary: "ui-icon-circle-check"
                                },
                                text: true
                            });
                        });
                    </script>
                    或者 <a id="btnCancel">&nbsp;取消&nbsp;</a>
                </div>
            </div>
        </div>
        </form>
    </div>
    <div class="page-submit" style="display: none;">
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_remind" style="display: none; min-height: 130px;">
        <h1>
            小贴士</h1>
        <p class="indent">
            这里您可以看到自己的基本信息和扩展信息，同时可以修改自己的联系方式。方便大家联系！
        </p>
    </div>
</asp:Content>
